import * as PIXI from 'pixi.js'
import { useWindowSize } from '@vueuse/core'
import { setPixi } from '@/store/modules/usePixiStore'
import { pageUpButtonClick, pageDownButtonClick } from '@/utils/events'
import useSearchStore from '@/store/modules/useSearchStore'
import useMainStore from '@/store/modules/useMainStore'
import { watch } from 'vue'

export default async (textureSource: PIXI.TextureSource) => {
  const mainStore = useMainStore()
  const searchStore = useSearchStore()
  const { scale } = mainStore.getAppAttr
  const { width, height } = useWindowSize()
  const { current, total, fontSize } = searchStore
  // 翻页按键
  const container = new PIXI.Container()
  // 按键背景
  const bgTexture = new PIXI.Texture({
    source: textureSource,
    frame: new PIXI.Rectangle(1253, 330, 40, 200),
  })
  // 方向箭头
  const texture = new PIXI.Texture({
    source: textureSource,
    frame: new PIXI.Rectangle(246, 140, 52, 48),
  })
  const bg = new PIXI.Sprite(bgTexture)
  bg.anchor.set(0.5)
  bg.scale.set(1.2, 1)
  container.addChild(bg)
  // 向上
  const spriteUp = new PIXI.Sprite(texture)
  spriteUp.anchor.set(0.5)
  spriteUp.position.set(0, -200 / 2)
  container.addChild(spriteUp)
  // 向下
  const spriteDown = new PIXI.Sprite(texture)
  spriteDown.anchor.set(0.5)
  spriteDown.scale.set(1, -1)
  spriteDown.position.set(0, 200 / 2)
  container.addChild(spriteDown)
  container.position.set((width.value / scale) * 0.05, height.value / scale / 2)
  // 当前页数
  const currentText = new PIXI.Text({
    text: current,
    style: {
      fontFamily: 'XQFont',
      fontSize: fontSize,
      fill: 0x000000,
      align: 'center',
    },
  })
  currentText.anchor.set(0.5)
  currentText.position.set(0, -fontSize)
  container.addChild(currentText)
  // 分隔
  const separator = new PIXI.Text({
    text: '/',
    style: {
      fontFamily: 'XQFont',
      fontSize: fontSize,
      fill: 0x000000,
      align: 'center',
    },
  })
  separator.anchor.set(0.5)
  separator.rotation = Math.PI / 4
  container.addChild(separator)
  // 总页数
  const totalText = new PIXI.Text({
    text: total,
    style: {
      fontFamily: 'XQFont',
      fontSize: fontSize,
      fill: 0x000000,
      align: 'center',
    },
  })
  totalText.anchor.set(0.5)
  totalText.position.set(0, fontSize)
  container.addChild(totalText)
  setPixi('pageUp', spriteUp)
  setPixi('pageDown', spriteDown)
  pageUpButtonClick.whiteAdd(spriteUp)
  pageDownButtonClick.whiteAdd(spriteDown)
  // 监听页数变化
  watch(
    () => searchStore.current,
    val => {
      currentText.text = val
    },
  )
  watch(
    () => searchStore.total,
    val => {
      totalText.text = val
    },
  )
  return container
}
